<template>
  <div>
    <Input
      v-model="org.orgName"
      :placeholder="$t('module.treeManage.selectOrg')"
      style="width: 100%"
      :size="size?size:'small'"
      readonly
    >
      <span slot="append" @click="select">{{$t('module.treeManage.select')}}</span>
    </Input>
  </div>
</template>
<script>
import SelectOrgTree from "./SelectOrgTree";
export default {
  name: "SelectOrg",
  components: {},
  model: {
    prop: "orgId",
    event: "change"
  },
  props: {
    orgObject: {
      type: Object,
      default() {
        return null;
      }
    },
    rootOrgId: {
      type: String,
      default() {
        return null;
      }
    },
    rootOrgName: {
      type: String,
      default() {
        return null;
      }
    },
    orgId: {
      type: String,
      default() {
        return "";
      }
    },
    orgName: {
      type: String,
      default() {
        return "";
      }
    },
    disabled: {
      type: Boolean,
      default() {
        return false;
      }
    },
    size: {
      type: String,
      default() {
        return null;
      }
    }
  },
  data() {
    return {
      org: this.orgObject ? this.orgObject : { orgId: this.orgId, orgName: this.orgName }
    };
  },
  computed: {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    select() {
      if (this.disabled) {
        return;
      }
      new this.$pageModal(
        SelectOrgTree,
        {
          props: {
            rootOrgId: this.rootOrgId,
            rootOrgName: this.rootOrgName,
            orgId: this.org.orgId,
            orgName: this.org.orgName
          }
        },
        data => {
          if (data) {
            this.org.orgId = data.orgId;
            this.org.orgName = data.orgName;
            this.$emit("change", data.orgId ? data.orgId : "");
          }
        }
      );
    }
  },
  watch: {},
  directives: {}
};
</script>
